// import React, { Component } from 'react'
// import RouterComp from './router'
// import { NavLink } from "react-router-dom"
// import styles from "./App.less"  

// /**
//  *   NavLink 组件是用于路由的激活
//  */
// export default class App extends Component {
//   render() {
//     return (
//       <div>
//         {/* 路由导航区域 */}
//         {/* <NavLink to="/home" activeClassName='nav_active' > 首页 </NavLink>
//         <NavLink to="/user" activeClassName='nav_active' > 个人中心 </NavLink> */}

//         {/* 路由展示区域 */}
//         <RouterComp />
//       </div>
//     )
//   }
// }


import React, { Component } from 'react'
import RouterComp from "./router"
import Tab from "./components/Tab"
import TabBar from "./components/TabBar"
import { withRouter } from 'react-router-dom'

 class App extends Component {
   constructor(props) {
     super(props)
     this.state = {
       title: "首页",
       tabBarFlag: true,
       tabTitle: {
         "/home": "首页",
         "/category": "分类",
         "/activity": "活动",
         "/car": "购物车",
         "/user": "个人中心",
       }
     }
   }
  componentWillReceiveProps(nextProps) { // 状态改变后 拿到的 状态值
    this.changeTitle(nextProps)
    this.changeTabBarFlag(nextProps)
  }
  componentDidMount() {  // 这个是 初始化 拿到那个值
    this.changeTitle()
    this.changeTabBarFlag()
  }

  // 看上面两段代码相似度 挺高的 就封装函数
  changeTitle = nextProps => {
    const {location:{pathname}} = nextProps ? nextProps : this.props
    const { tabTitle } = this.state
    this.setState({
      title: tabTitle[pathname]
    })
  }

  // 监听开关
  changeTabBarFlag = (nextProps) => {
    const {location:{pathname}} = nextProps ? nextProps : this.props
    if(pathname.indexOf('/list') != -1) { // 如果 != 说明找到了
      this.setState({
        tabBarFlag: false
      })
    } else {
      this.setState({
        tabBarFlag: true
      })
    }
  }
  render() {
    const { title, tabBarFlag } = this.state
    return (
      <div>
        <Tab title={title} />
        <RouterComp />
        { tabBarFlag && <TabBar {...this.props} />}
      </div>
    )
  }
}

export default withRouter(App)